<template>
	<view class="content" :style="'background:#f7f7f7;'">
		<view class="create-view" :style="'background:#FFFFFF;'">
			<text class="font34 fontw500" :style="'width:100%;color:#111111;'">姓名：</text>
			<input class="textarea-class" :style="'background:#F7F7F7;'" v-model="id_card" :placeholder-style="'color:#AEAEAE;'" placeholder="请输入姓名" />
		</view>
		<view class="create-view" :style="'background:#FFFFFF;'">
			<text class="font34 fontw500" :style="'width:100%;color:#111111;'">身份证号(18位)：</text>
			<input class="textarea-class" :style="'background:#F7F7F7;'" v-model="id_card" :placeholder-style="'color:#AEAEAE;'" placeholder="请输入身份证号码" />
		</view>
		<view class="save-btn" :style="'color:#FFFFFF;background:#E9564F;'" @click="backPage">
			<text>保存</text>
		</view>
		<!-- <view class="tip-bottom">
			<image class="tip-image" src="../../../static/key-create-tip-image.png" mode=""></image>
			<text class="font28" :style="'color:#AEAEAE;'">设置口令后，用户需联系你获取口令才可参与抽奖</text>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username:'',
				id_card:''
			};
		},
		methods:{
			changeKey(e){
				this.text_rule = e.detail.value
				this.$store.commit("createKey",this.text_rule)
			},
			backPage(){
				if(this.username != '' && this.id_card != ''){
					this.$store.commit("createUserIdCard",{ username:this.username,
															id_card:this.id_card})
					uni.navigateBack({})
				}else{
					uni.showToast({
						title:'请输入完整的实名信息！',
						icon:'none'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.tip-bottom{
		width: 100%;
		display: flex;
		align-items: center;
		.tip-image{
			height: 34upx;
			width: 34upx;
			margin-right: 10upx;
		}
	}
	.save-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		font-size: 34upx;
		border-radius: 10upx;
		margin-bottom: 30upx;
	}
	.textarea-class{
		margin-top: 30upx;
		width: 100%;
		border-radius: 8upx;
		box-sizing: border-box;
		padding: 24upx 30upx 24upx 30upx;
		height: 90upx;
		font-size: 28upx;
	}
	.create-view{
		width: 690upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30upx;
		box-sizing: border-box;
		border-radius: 20upx;
		margin-bottom: 30upx;
	}
	.content{
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 30upx;
		box-sizing: border-box;
		width: 750upx;
		min-height: 100vh;
	}
</style>
